<template>
    <view class="wrapper">
		
        <view class="tbody-list-item" v-for="(item,index) in articleList" :key="item.id" @click.stop="addDetails(item.id)">
			<!-- 左侧 -->
			<view class="tbody-list-left">
				<view class="month">{{item.day}}</view>
				<view class="year">{{item.month}}月</view>
			</view>
			<!-- 左侧end -->
			
			<!-- 右侧 -->
            <view class="tbody-list-right">
				<view class="item-content-a">
					<view class="item-content-label">
						<view class="content-area">
							<view class="content-area-icon"></view>
							<view>{{item.circle_name}}</view>
						</view>
					</view>
				    <view  v-if="item.content">
				        <u-parse  :content="item.content" @preview="preview" @navigate="navigate" />
				    </view>
				    <view class="content-img-b" v-if="item.img_url_array.length == 0 ? false : true">
				        <img v-for="(imgUrl,index) in item.img_url_array" :key="index" mode="widthFix" :src="imgUrl" />
				    </view>
				    <view class="content-video-b" v-if="item.video_url_array.length == 0 ? false : true">
				        <video :src="item.video_url_array[0]"></video>
				    </view>
				    <!-- <view class="content-label-a">
				        <view>{{item.classify_name}}</view>
				        <view>{{item.circle_name}}</view>
				    </view> -->
				</view>
				
				<!--                    单个内容底部-->
				<view class="list-item-footer">
				    <view class="list-item-left">
						<view ><img src="/static/img/huifu.png">{{item.comment_number}}</view>
				        <view @click.stop="setInteractive(2,item.id,index)"><img src="/static/img/zhuanfa.png">{{item.share_number}}</view>
				    </view>
				    <view class="list-item-right">
				        <view @click.stop="setInteractive(0,item.id,index)"><img src="/static/img/appreciate_up.png">{{item.good_number}}</view>
				        <view @click.stop="setInteractive(1,item.id,index)"><img src="/static/img/appreciate_down.png">{{item.not_good_number}}</view>
				    </view>
				</view>
				<!--                    end-->
			</view>
			<!-- 右侧end -->
        </view>
        <!--        弹窗-->
        <Dislike :fatherValue.sync="popupShow" :articleItem.sync="articleItem" :isAdmin="isAdmin"></Dislike>
        <!--        end-->
    </view>

</template>

<script>
    import Dislike from "@/pages/components/popup/dislike";
	import uParse from '@/components/gaoyia-parse/parse.vue'
    export default {
        name: "invitation",
        components: {Dislike,uParse},
        props:{
            Article:{
                required: true
            },
			isAdmin:{//区分普通用户还是管理员按钮
				default:false,
				type:Boolean
			}
        },
        data(){
            return{
                articleList : [],
                popupShow: false,
                articleItem:{}
            }
        },
		
        mounted(){
          // console.log(this.articleList)
        },
        methods:{
            
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			  uni.navigateTo({
			  	url:href
			  })
			},
			formateTime(data){
				
				data.map(item=>{
					let time=this.formatTimeHandle(item.created_at);
					item.day=time.day;
					item.month=time.month;
					return item
				})
				return data
			},
			formatTimeHandle(time){
				//格式化时间
				let timeArr=time.split(' ');
				let normalizeYear=timeArr[0].split('-');
				let normalizeTime=timeArr[1].split(':');
				return {month:normalizeYear[1],day:normalizeYear[2]}
			},
			//点击删除弹窗
            onDelPost(item){
                this.popupShow = true;
                this.articleItem = item;
            },
            //新增帖子互动记录
            async setInteractive(type,articleID,index){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    post_article_id : articleID,
                    action_type: type
                }
                const res = await this.$api.setInteractive(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.$emit('addNum',{type,index})
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
					this.$emit('reduceNum',{type,index})
                }
            },
            //跳转帖子详情页面
            addDetails(id){
                uni.navigateTo({
                    url: "/pages/Details/postdetails?post_article_id="+id
                })
            },
            //跳转到个人主页
            addPersonCenter(userID){
                uni.navigateTo({
                    url: "/pages/person/personHomepage/personHomepage?userId="+userID
                })
            },
        },
        watch:{
            articleList(newValue, oldValue){
                this.$emit('updata:Article',newValue);
            },
            Article(newValue){
                this.articleList = this.formateTime(newValue);
				
				console.log(this.articleList,1111)
            }
        }
    }
</script>

<style scoped lang="scss">
@import '~@/static/scss/mixin.scss';
    .tbody-list-item{
		display: flex;
        background: #ffffff;
        margin: 20rpx 0;
    }
	//左侧
	.tbody-list-left{
		width:150rpx;
		text-align: center;
		.month{
			font-size: 48rpx;
			line-height: 48rpx;
			color:rgba(187,188,191,1);
		}
		.year{
			margin-top:10rpx;
			font-size: 22rpx;
			line-height: 22rpx;
			color:rgba(41,41,41,1);
		}
		
	}
	.tbody-list-right{
		flex:1;
		.item-content-label{
			@include flex(flex-start);
		}
		.content-area{
			background:rgba(243,245,246,1);
			border-radius:30rpx;
			width: auto;
			padding:10rpx;
			@include flex(flex-start);
			.content-area-icon{
				margin-right: 10rpx;
				background:rgba(255,226,38,1);
				border:8rpx solid rgba(42,42,42,1);
				border-radius: 50%;
				width: 25rpx;
				height: 25rpx;
			}
		}
		.content-text-a{
			margin:30rpx 0;
		}
	}
	.list-item-footer{
		width: 100%;
		@include  flex(space-between)
	}
	
	.content-img-b ._img{
		width: 120rpx;
		height: 120rpx;
	}
</style>